iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
1

簡言

這個方式應該是比較少見到有人使用的了,這個想法是被老友 Paul 所激發的,writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上關係,它的用途是改變文字書寫的方向從橫書變直書,且支援度從很早期的IE5就有支援了,但當時Amos鮮少使用,一來是網頁多是橫書居多,另外當時除了IE瀏覽器以外,其他瀏覽器的支援度似乎都不太好,也就很少使用了。

原理說明

writing-mode 本身是設定文字書寫的方向,既然文章書寫方向可以設定直書,那麼就表示我們可以利用直書方式搭配 text-align: center 來讓文字垂直置中囉?! 有了這個想法支後,當然就是馬上試做啦!
Amos 利用 writing-mode 將一整個文字容器也就是 div 區塊變成直書,接著此容器設定 text-align: center 來讓子層達到垂直置中的目的,白話一點的解說的話,就是你把原本橫排的文字,變成直排了,所以原本橫排用到的水平對齊中間(text-align: center),就變成了控制直排的中間了(垂直置中),原理就是這麼簡單。但要特別注意的是瀏覽器對此語法的支援來說,需要拆開寫法才行,不然某些瀏覽器吃的語法不同,可能會讓你的網頁在某些瀏覽器上看起來無效,這會是最需要注意到的。而有些人可能會發現到各瀏覽器好像有些正常有些不正常,這是由於瀏覽器的語法有新舊兩種寫法,所以如果各位須要讓各個瀏覽器都支援的話,那麼請自行去查一下囉(Amos好壞)。

<div class="box box23">
  <div class="content">
    <div class="txt">
      立馬來看 Amos 實際完成的
      <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
        CSS3精美相簿效果
      </a>
      效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
      這個置中的想法來自於 Paul 
    </div>
  </div>
</div>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Padding 來做垂直置中啦
下一篇
使用 table 來做垂直置中區塊
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言